<template>
  <div style="width:100%;height:100%;min-width: 350px;" :id="visite_id" class="pie"></div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'dataTimeline',
    props: ['dataArr', 'visite_volume_id', 'xDataTitle'],
    data () {
      return {
        data: [],
        yDataList: [],
        visite_id: '',
        title: '',
      };
    },
    created: function () {
      var _this = this;
      _this.data = _this.dataArr;
      _this.visite_id = 'id_' + _this.visite_volume_id;
      _this.title = _this.xDataTitle;
    },
    mounted () {
      var _this = this;
      this.$nextTick(() => {
        var visite_id = _this.visite_id;
        var dataTimeline = echarts.init(document.getElementById(visite_id));
        var itemStyle = {
          normal: {
            opacity: 0.8,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        };

        var sizeFunction = function (x) {
          return x;
        };
        // Schema:
        var schema = [
          {name: 'Income', index: 0, text: '纳税总额', unit: '元'},
          {name: 'LifeExpectancy', index: 1, text: '人数', unit: '人'},
          {name: 'Population', index: 2, text: '净资产', unit: '万元'},
          {name: 'Country', index: 3, text: '企业', unit: ''}
        ];
        var data = _this.data;
        var option = {
          baseOption: {
            timeline: {
              axisType: 'category',
              orient: 'vertical',
              autoPlay: true,
              inverse: true,
              playInterval: 2000,
              left: null,
              right: 0,
              top: 20,
              bottom: 20,
              width: 55,
              height: null,
              label: {
                normal: {
                  textStyle: {
                    color: '#999'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              symbol: 'none',
              lineStyle: {
                color: '#555'
              },
              checkpointStyle: {
                color: '#bbb',
                borderColor: '#777',
                borderWidth: 2
              },
              controlStyle: {
                showNextBtn: false,
                showPrevBtn: false,
                normal: {
                  color: '#666',
                  borderColor: '#666'
                },
                emphasis: {
                  color: '#aaa',
                  borderColor: '#aaa'
                }
              },
              data: []
            },
            backgroundColor: '#404a59',
            title: [{
              text: data.timeline[0],
              textAlign: 'center',
              left: '63%',
              // top: '55%',
              bottom: '15%',
              textStyle: {
                fontSize: 100,
                color: 'rgba(255, 255, 255, 0.7)'
              }
            }, {
              text: _this.title,//'纳税前五名企业人数与纳税总额演变',
              left: 'center',
              top: 10,
              textStyle: {
                color: '#ccc',
                fontWeight: 'normal',
                fontSize: 22
              }
            }],
            tooltip: {
              padding: 5,
              backgroundColor: '#222',
              borderColor: '#777',
              borderWidth: 1,
              formatter: function (obj) {
                var value = obj.value;
                return value[3] + '<br>'
                    + schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
                    + schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
                    + schema[2].text + '：' + value[2] + schema[2].unit + '<br>';
              }
            },
            grid: {
              top: 100,
              containLabel: true,
              left: 30,
              right: '110'
            },
            xAxis: {
              type: 'log',
              name: '纳税总额',
              max: 500000,
              min: 5000,
              nameGap: 25,
              nameLocation: 'middle',
              nameTextStyle: {
                fontSize: 16
              },
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              },
              axisLabel: {
                formatter: '{value} 元'
              }
            },
            yAxis: {
              type: 'value',
              name: '人数',
              // max: 1000,
              max: 300,
              nameTextStyle: {
                color: '#ccc',
                fontSize: 16
              },
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                formatter: '{value} 人'
              }
            },
            visualMap: [
              {
                show: false,
                dimension: 3,
                categories: data.counties,
                calculable: true,
                precision: 0.1,
                textGap: 30,
                textStyle: {
                  color: '#ccc'
                },
                inRange: {
                  color: (function () {
                    var colors = ['#928ea8', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'];
                    return colors.concat(colors);
                  })()
                }
              }
            ],
            series: [
              {
                type: 'scatter',
                itemStyle: itemStyle,
                data: data.series[0],
                symbolSize: function (val) {
                  // return sizeFunction(val[2]);
                  return val[2];
                }
              }
            ],
            animationDurationUpdate: 3000,
            animationEasingUpdate: 'quinticInOut'
          },
          options: []
        };

        for (var n = 0; n < data.timeline.length; n++) {
          option.baseOption.timeline.data.push(data.timeline[n]);
          option.options.push({
            title: {
              show: true,
              'text': data.timeline[n] + ''
            },
            series: {
              name: data.timeline[n],
              type: 'scatter',
              itemStyle: itemStyle,
              data: data.series[n],
              symbolSize: function (val) {
                // return sizeFunction(val[2]);
                return val[2];
              }
            }
          });
        }
        dataTimeline.setOption(option);
        window.addEventListener('resize', function () {
          dataTimeline.resize();
        });
      });
    }
  };
</script>
